// 中部的圆形图片

<template>
  <div class="bg">
    <div class="banxin tanxin">
        <div v-for="(item,index) in msg" :key="index" class="bginfo">
            <img :src="(item.bg)" alt="">
            <p>{{item.title}}</p>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    name : 'AroundBg',
    data(){
        return {

        }
    },
    props :['msg']
}
</script>

<style scoped lang="less">
    .bg {
        width: 100%;
        background-color: rgb(220, 236, 249);
        background-size: 100%;
        min-width: 1002px;
    }
    .tanxin {
        display: flex;
        justify-content: space-between;
        padding: 30px 0;
        .bginfo{ 
            width: 200px;
            height: 200px;
            border-radius: 50%;
            overflow: hidden;
            position: relative;
            p {
                font-family: 'myFont';
                font-size: 30px;
                position: absolute;
                z-index: 10;
                color: white;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
            }
            img {
                height: inherit;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
            }
        }
    }
</style>